<template>
	<view>
		<!-- 搜索组件 -->
		<Search @handleSearchInput="toSearch"/>
		
		<!-- 分类布局 -->
		<view class="main">
			<!-- 左边的菜单列表 -->
			<view class="left">
				<view class="menu-item" :class="{active: currentIndex === index}"
				v-for="(item, index) of categoryList" :key="item.id"
				@click="changeCategory(index)"
				>
				{{item.cat_name}}
				</view>
			</view>
			
			<!-- 右边的商品列表 -->
			<view class="right">
				<!-- 循环菜单的第二级 -->
				<block v-for="item of categoryList[currentIndex].children" :key="item.cat_id">
					<!-- 二级标题 -->
					<view class="title">/ <text>{{item.cat_name}}</text> /</view>
					
					<view class="goods">
						<!-- 第三级,单个商品 -->
						<view class="goods-item" v-for="goods of item.children" :key="goods.cat_id">
							<navigator :url="`../goods_list/goods_list?keyword=${goods.cat_name}`">
								<image :src="goods.cat_icon"></image>
								<text>{{goods.cat_name}}</text>
							</navigator>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import Search from "../../components/search.vue";
	export default {
		data() {
			return {
				// 分类的数据
				categoryList: [],
				// 当前高亮的菜单索引
				currentIndex: 0
			}
		},
		components: {
			Search
		},
		onLoad() {
			uni.request({
				url:"https://api-hmugo-web.itheima.net/api/public/v1/categories",
				success: (res) => {
					this.categoryList = res.data.message
				}
			})
		},
		methods: {
			changeCategory(index){
				this.currentIndex = index
			},
			toSearch(){
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main{
		position: absolute;
		top: 100rpx;
		bottom: 0;
		width: 750rpx;
		display: flex;
		
		.left{
			width: 182rpx;
			height: 100%;
			overflow-y: scroll;
			background: #eee;
			.menu-item{
				position: relative;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 14px;
			}
			
			.active{
				color: #EA4350;
				
				&::after{
					display: block;
					content: "";
					width: 3px;
					height: 20px;
					position: absolute;
					left: 0;
					top:50%;
					margin-top: -10px;
					background: #EA4350;
				}
			}
		}
		
		.right{
			flex:1;
			height: 100%;
			overflow-y: scroll;
			
			.title {
				padding: 20rpx;
				text-align: center;
				color: #999;
				
				text{
					color: #333;
					margin: 0 20rpx;
				}
			}
			
			.goods{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				
				.goods-item{
					width: 33.33%;
					margin-bottom: 30rpx;
					
					navigator{
						display: flex;
						width: 100%;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
					
					text{
						font-size: 12px;
						margin-top: 5px;
					}
				}
				
				image{
					width: 140rpx;
					height: 140rpx;
					display: block;
				}
			}
		}
	}

</style>
